import {useCallback, useState} from 'react'
import { connect} from 'react-redux'
import axios from 'axios'
import { withRouter } from 'next/router'
import { Layout, Icon, Input , Avatar, Tooltip, Dropdown, Menu, Alert  } from 'antd'
import getConfig from 'next/config'
import Container from './Container.jsx'
import { logout } from '../store/actions/actions'
import Link from 'next/link'
const { Header, Content, Footer } = Layout;

// style
const githubIconStyle = {
    color: 'white',
    fontSize: 40,
    display: 'block',
    paddingTop: 10,
    marginRight: 20
}
const footerStyle ={
    textAlign: 'center'
}
const { Search } = Input
const { publicRuntimeConfig} = getConfig()
const Comp = ({ color, children, style }) => <div style={{color, ...style}}>{children}</div>
const MyLayout = ({children,user,logout,router}) => {
    const urlQuery = router.query && router.query.query
    //搜索内容
    const [search, setSearch] = useState(urlQuery)
    const setSearchChange = useCallback((event) =>{
        setSearch(event.target.value)
    },[setSearch])
    const handleOnSearch = useCallback( ()=> {
        if (search) {
          router.push(`/search?query=${search}`)
        } else {
            alert('搜索内容不能为空')
        }
    })
    //退出
    const handleLogout = useCallback(() => {
        logout()
    },[logout])
    
    const handleGoToAuth = useCallback( async () => {
        //auth之前记录路由地址
        const result =  await axios.get(`/prepare-auth?url=${router.asPath}`)
        if(result.status === 200) {
            location.href = publicRuntimeConfig.OAUTH_URL
        } else {
            console.log(result)
        }
        //location.href = result.status === 200 ?  publicRuntimeConfig.OAUTH_URL : ''
        
    })
    
    const userDropdown = (
      <Menu>
          <Menu.Item>
              <div href="" onClick={handleLogout}>
                  退出
              </div>
          </Menu.Item>
      </Menu>
    )
    return (
      <Layout>
        <Header>
            <Container renderer={<div className="header-inner" />}>
                <div className="header-left">
                    <div className="logo">
                        <Link href="/" >
                            <a>
                                <Icon type="github" style={githubIconStyle} />
                            </a>
                        </Link>
                    </div>
                    <div>
                        <Search
                          placeholder="搜索仓库"
                          value={search}
                          onChange={setSearchChange}
                          onSearch={handleOnSearch}
                        />
                    </div>
                </div>
                <div className="header-right">
                    <div className="user">
                        { user && user.id?
                          (
                            <Dropdown overlay={userDropdown}>
                                <a href={publicRuntimeConfig.OAUTH_URL}>
                                    <Avatar size={40} src={user.avatar_url} />
                                </a>
                            </Dropdown>
                          )
                          :(
                            <Tooltip title="点击进行登录">
                                <a href={publicRuntimeConfig.OAUTH_URL} onClick={handleGoToAuth}>
                                    <Avatar size={40} icon="user" />
                                </a>
                            </Tooltip>
                            )
                        }
                        
                    </div>
                </div>
            </Container>
        </Header>
        <Content>
            <Container renderer={<Comp/>}>
                {children}
            </Container>
        </Content>
        <Footer style={footerStyle}>
            Develop by ayuan@
            <a href="#">qiuzongyuan</a>
        </Footer>
        <style jsx>{`
            .header-inner{
              display: flex;
              justify-content: space-between;
            }
            .header-left{
              display: flex;
              justify-content: flex-start;
            }
        `}</style>
        <style jsx global>{`
            #__next{
              height: 100%;
            }
            .ant-layout{
              min-height: 100%;
              background-color: white;
            }
            .ant-layout-header{
              padding-left: 0;
              padding-right: 0;
            }
            .ant-layout-footer{
              background-color: white;
            }
        `}</style>
      </Layout>
    )
}
export default connect(function mapStateToProps(state) {
    return {
        user: state.user
    }
},
  function mapDispatchToProps(dispatch) {
  return {
      logout: () => dispatch(logout())
  }
}
)(withRouter(MyLayout))
